<template>
  <div class="login-page">
    <BrandHeader>
      <button class="skip-btn" @click="skipLogin">暂不登录</button>
    </BrandHeader>
    <div class="shell" role="main">
      <!-- 左侧：品牌海报区 -->
      <section class="left-hero" aria-label="品牌展示">
        <div class="hero-card">
          <img class="hero-logo" src="/logo.png" alt="品牌标志"
               onerror="this.style.display='none'" />
          <img class="hero-slogan" src="/logo2.png" alt="发现电影惊喜 邂逅专属热爱"
               onerror="this.style.display='none'" />
        </div>
      </section>

      <!-- 中间分隔线 -->
      <div class="divider" aria-hidden="true"></div>

      <!-- 右侧：登录表单 -->
      <section class="right-panel" aria-label="登录">
        <div class="login-container">
          <div class="login-title">登录</div>
          <input v-model="code" placeholder="请输入1-7位编号" class="login-input" inputmode="numeric" pattern="\\d{1,7}" maxlength="7" @input="onCodeInput" />
          <input v-model="password" type="password" placeholder="密码" class="login-input" @keyup.enter="doLogin" />
          <button @click="doLogin" class="login-btn">登录</button>
          <div v-if="error" class="login-error">{{ error }}</div>
          <div class="login-tip">未注册？<router-link class="link" to="/register">去注册</router-link></div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';
import BrandHeader from '@/components/BrandHeader.vue';
import { login } from '../services/api';
import { useRouter, useRoute } from 'vue-router';

export default {
  name: 'LoginPage',
  components: { BrandHeader },
  setup() {
  const code = ref('');
    const password = ref('');
    const error = ref('');
    const router = useRouter();
    const route = useRoute();

    async function doLogin() {
      try {
        if (!(code.value.length >= 1 && code.value.length <= 7)) {
          error.value = '请输入1-7位数字编号';
          return;
        }
        if (!password.value) {
          error.value = '请输入密码';
          return;
        }
        const res = await login(code.value, password.value);
        localStorage.setItem('token', res.data.access_token);
        // 登录后跳回来源（受保护页）或首页
        const redirect = route.query.redirect ? String(route.query.redirect) : '/recommend'
        router.replace(redirect)
      } catch (e) {
        error.value = e.response?.data?.detail || '登录失败';
      }
    }

    function skipLogin() {
      // 跳转到首页
      router.push('/recommend')
    }

    function onCodeInput(e) {
      const digits = String(e.target.value || '').replace(/\D/g, '').slice(0,7)
      code.value = digits
    }

    return { code, password, error, doLogin, skipLogin, onCodeInput };
  }
}
</script>
<style scoped>
.login-page { min-height: 100vh; background: #0f0f0f; color: #fff; }
.shell {
  max-width: 1440px; /* 放大版心 */
  margin: 0 auto;
  padding: 18px 24px 48px;
  display: grid;
  grid-template-columns: 1.1fr auto 1.4fr; /* 右侧更宽 */
  column-gap: 36px;
  align-items: stretch;
}

/* 左侧品牌区 */
.left-hero { display: flex; align-items: center; }
.hero-card {
  width: 100%;
  min-height: 420px; /* 放大整体高度 */
  background: transparent; /* 左侧与页面背景一致 */
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hero-logo { width: 200px; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); margin-bottom: 12px; }
.hero-slogan { width: 340px; max-width: 70%; height: auto; margin: 6px 0 2px; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)); }

/* 分隔线 */
.divider {
  width: 2px;
  align-self: center;
  height: 82%;
  background: linear-gradient(180deg, #ff8a65 0%, #ff4e4e 50%, #ff8a65 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 78, 78, 0.35);
}

/* 右侧登录卡片 */
.right-panel { display: flex; align-items: center; justify-content: center; }
.login-container {
  width: 560px; /* 更大的登录卡片 */
  background: #141414;
  border: 1px solid #222;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  padding: 38px 32px 28px;
  display: flex; flex-direction: column; align-items: center;
}
.login-title { font-size: 26px; font-weight: 800; color: #ff4e4e; margin-bottom: 22px; letter-spacing: 1.6px; }
.login-input {
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  font-size: 1.05rem;
  background: #1a1a1a;
  color: #eee;
  transition: border 0.2s, background 0.2s;
}
.login-input:focus {
  border: 1.5px solid #ff4e4e;
  outline: none;
  background: #171717;
}
.login-btn {
  width: 100%;
  padding: 14px 0;
  background: #ff4e4e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s, transform .1s ease;
}
.login-btn:hover {
  background: #ff3333;
  transform: translateY(-1px);
}
.login-error {
  color: #ff9494;
  margin-top: 8px;
  font-size: 0.95rem;
}
.login-tip { margin-top: 10px; color: #9aa0a6; font-size: 14px; }
.login-tip .link { color: #ff6b57; text-decoration: none; font-weight: 700; font-size: 14px; }
.login-tip .link:hover { color: #ff4e4e; text-decoration: underline; }

/* 顶部右侧“暂不登录”按钮 */
.skip-btn {
  background: #ff4e4e;
  color: #fff;
  border: 1px solid #ff4e4e;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.skip-btn:hover { background: #ff3333; border-color: #ff3333; transform: translateY(-1px); }
</style>